<template>
	<view class="content">
		<view class="tab-block">
			<view :class="tabActive==3?'active':''" @click="tabActive=3" class="tab-item">直播预告</view>
			<view :class="tabActive==1?'active':''" @click="tabActive=1" class="tab-item">直播中</view>
			<view :class="tabActive==2?'active':''" @click="tabActive=2" class="tab-item">已结束</view>
		</view>
		<view v-if="roomList.length>0" :style="isCreate?'padding-bottom: 70rpx':''" class="block live-block">
			<template v-if="tabActive==1">
				<view v-for="(item,index) in roomList"
					@click="navigate('/page_other/live/room?action=audience&roomId='+item.roomNo)" :key="item.id"
					class="live-item">
					<view class="cover-block">
						<image :src="item.coverUrl" class="cover-image" mode="aspectFill"></image>
						<view class="user-name">{{item.realName}}</view>
						<view class="view-count">
							<view class="iconfont icon-yanjing"></view>{{item.audience}}人
						</view>
					</view>
					<view class="room-name">{{item.roomName}}</view>
				</view>
			</template>
			<template v-else-if="tabActive==2">
				<!-- 直播回调暂无域名所以注释 -->
				<!-- @click="navigate(`/page_other/live/playback?roomNo=${item.roomNo}`)" -->
				<view v-for="(item,index) in roomList" :key="item.id" @click="showMsg" class="live-item">
					<view class="cover-block">
						<image :src="item.coverUrl" class="cover-image" mode="aspectFill"></image>
						<view class="user-name">{{item.realName}}</view>
					</view>
					<view class="room-name">{{item.roomName}}</view>
				</view>
			</template>
			<template v-else>
				<view v-for="(item,index) in roomList" :key="item.id"
					@click="navigate(`/page_other/live/trailer?id=${item.id}`)" class="live-item">
					<view class="cover-block">
						<image :src="item.coverUrl" class="cover-image" mode="aspectFill"></image>
						<view class="user-name">开播时间：{{item.startTime}}</view>
					</view>
					<view class="room-name">{{item.title}}</view>
				</view>
			</template>
		</view>
		<view class="empty" v-else-if="roomList.length>0&&!more">没有更多了哦</view>
		<view class="empty" v-else>暂无数据</view>
		<view v-if="isCreate" @click="navigate('/page_other/live/create')" class="create-btn">创建直播</view>
	</view>
</template>

<script>
	import {
		getLiveList,
		getLivePortendList
	} from '@/api/live.js';
	import {
		isMore,
		getMediaAuth
	} from '@/util/util.js'
	export default {
		data() {
			return {
				roomList: [],
				isCreate: false,
				pageConf: {
					page: 1,
					limit: 10
				},
				total: 0,
				more: true,
				tabActive: 3,
			}
		},
		watch: {
			tabActive(val) {
				this.pageConf.page = 1;
				this.pageConf.limit = 10
				this.getList(true)
			}
		},
		methods: {
			getList(refresh = false) {
				uni.showLoading({
					title: '加载中',
					mask: true,
				})
				if (this.tabActive == 1 || this.tabActive == 2) {
					getLiveList({
						...this.pageConf,
						type: this.tabActive
					}).then((res) => {
						uni.hideLoading()
						if (refresh) {
							this.roomList = res?.list ?? [];
						} else {
							this.roomList = [...this.roomList, ...res?.list ?? []]
						}
						this.total = res.count;
						this.more = isMore(this.pageConf.page, this.pageConf.limit, this.total)
					}).catch(() => {
						uni.hideLoading();
						this.showToast('列表加载失败！');
					})
				} else {
					getLivePortendList({
						...this.pageConf
					}).then(res => {
						uni.hideLoading()
						if (refresh) {
							this.roomList = res?.list ?? [];
						} else {
							this.roomList = [...this.roomList, ...res?.list ?? []]
						}
						this.total = res.count;
						this.more = isMore(this.pageConf.page, this.pageConf.limit, this.total)
					}).catch(() => {
						uni.hideLoading();
						this.showToast('列表加载失败！');
					})
				}
			},
			navigate(url) {
				uni.navigateTo({
					url
				})
			},

			showMsg() {
				this.showToast('暂未开放回放功能！');
			}
		},
		onLoad() {
			if (!this.$store.getters.IMReady) {
				this.showToast('im未初始化完成，请登录或重新进入小程序再试', () => {
					uni.navigateBack();
				});
				return;
			}
			this.getList();
		},
		onShow() {
			this.$store.dispatch('user/getUser').then((res) => {
				this.isCreate = res.livePower == 1
			})
		},
		onPullDownRefresh() {
			this.pageConf.page = 1;
			uni.stopPullDownRefresh();
			this.getList(true)
		},
		onReachBottom() {
			if (this.more) {
				this.pageConf.page++
				this.getList()
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		padding: 30rpx;

		.tab-block {
			margin: 0 auto;
			width: 540rpx;
			margin-bottom: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 5px;
			border: 1px solid #0256FF;

			.tab-item {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 180rpx;
				height: 60rpx;
				font-size: 28rpx;
				color: #0256FF;
			}

			.tab-item.active {
				color: #fff;
				background-color: #0256FF;
			}
		}

		.block {
			width: 100%;
			margin-bottom: 20rpx;
			position: relative;

			.search {
				width: 100%;
				height: 70rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				background: #F3F3F3;
				border-radius: 50rpx;
			}

			.iconfont.icon-sousuo {
				position: absolute;
				transform: translate(0, -50%);
				right: 20rpx;
				top: 50%;
				font-size: 42rpx;
				font-weight: bold;
				color: #999;
			}
		}

		.live-block.block {
			width: 100%;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.live-item {
				width: calc(50% - 16rpx);
				margin-right: 29rpx;
				margin-bottom: 10rpx;

				.cover-block {
					width: 100%;
					height: 220rpx;
					border-radius: 10rpx;
					overflow: hidden;
					position: relative;

					.cover-image {
						width: 100%;
						height: 100%;
						background: #efefef;
					}

					.user-name {
						position: absolute;
						left: 8rpx;
						bottom: 8rpx;
						font-size: 24rpx;
						color: #fff;
					}

					.view-count {
						position: absolute;
						right: 8rpx;
						bottom: 8rpx;
						font-size: 24rpx;
						color: #fff;
						display: flex;
						flex-direction: row;

						.iconfont {
							margin-right: 8rpx;
						}
					}
				}

				.room-name {
					font-size: 28rpx;
					margin-top: 10rpx;
				}
			}

			.live-item:nth-child(2n) {
				margin-right: 0;
			}
		}

		.create-btn {
			position: fixed;
			transform: translate(-50%, -50%);
			bottom: 0;
			left: 50%;
			width: 400rpx;
			height: 80rpx;
			background: #0256FF;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 40rpx;
		}
	}
</style>